<template>
  <div>
    根据订单号查询：
    <el-input style="width: 200px;" placeholder="请输入订单编号" v-model="selSendOrderId" @change="selSendOrderById"></el-input>
    <template >
      <el-table :data="orderSendList" border style="width: 100%;margin-top: 15px;">
        <el-table-column prop="orderId" label="编号" width="180">
        </el-table-column>
        <el-table-column prop="takeTime" label="取货时间" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址">
        </el-table-column>
        <el-table-column prop="orderPhone" label="联系方式">
        </el-table-column>
        <el-table-column prop="remarks" label="订单备注">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" @click="sendOrder(scope.row.orderId)">派单</el-button>
            <el-button size="mini" @click="cancelSendOrder(scope.row.orderId)">取消订单</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div style="margin-top: 15px;">
      <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="page.current"
        :page-sizes="[1,3,5, 7, 9, 11]" :page-size="page.size" layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>
    <!-- 取消订单窗口 -->
    <el-dialog
      title="取消订单原因"
      :visible.sync="cancelOrderReasonWindow"
      width="30%"
      center>
      <el-input type="textarea" placeholder="取消原因" v-model="siteCancelOrderReason"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelCancelOrder">取 消</el-button>
        <el-button type="primary" @click="okCancelOrder">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 发送订单窗口 -->
    <el-dialog
      title="选择回收员派单"
      :visible.sync="sendOrderWindow"
      width="50%"
      center>
      <template>
        <el-table :data="recycleList" border style="width: 100%">
          <el-table-column label="头像">
            <template slot-scope="scope">
              <el-image style="width: 50px;height: 50px;" :src="scope.row.recycleHeader"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="recycleName" label="姓名">
          </el-table-column>
          <el-table-column prop="recyclePhone" label="电话" >
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="okToSendOrder(scope.row.recycleAccountDTO.recycleAccountId)">派单</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selSendOrderId:"",//查询派单的订单号
        orderSendList: [], //待派单给回收员的订单
        page: {}, //分页对象
        pageNum: 1, //页数
        pageSize: 3, //每页数量
        startTime: "", //订单查询开始时间范围
        endTime: "", //订单查询结束时间范围
        sendOrderWindow:false,//派单的窗口
        recycleList:[],//回收员列表
        recycleState:0,//回收员默认状态正常
        sendOrderId:"",//派单的订单id
        cancelOrderReasonWindow:false,//取消订单窗口
        cancelOrderId:"",//取消订单id
        siteCancelOrderReason:"",//站点取消订单原因
      }
    },
    methods: {
      //根据订单编号查询派单的订单
      selSendOrderById(){
        this.$http.post("/order/recycleOrder/getSiteOrder.site", {
          orderId:this.selSendOrderId,
          orderState: 1,
          pageNum: 1,
          pageSize: 3,
          startTime: this.startTime,
          endTime: this.endTime
        }).then(resp => {
          if (resp.data.flag) {
            this.page = resp.data.data
            this.orderSendList = resp.data.data.records
          } else {
            alert(resp.data.message)
          }
        })
      },
      currentChange(val){
        this.$http.post("/order/recycleOrder/getSiteOrder.site", {
          orderState: 1,
          pageNum: val,
          pageSize: this.page.size,
          startTime: this.startTime,
          endTime: this.endTime
        }).then(resp => {
          if (resp.data.flag) {
            this.page = resp.data.data
            this.orderSendList = resp.data.data.records
          } else {
            alert(resp.data.message)
          }
        })
      },
      sizeChange(val){
        this.$http.post("/order/recycleOrder/getSiteOrder.site", {
          orderState: 1,
          pageNum: this.page.current,
          pageSize: val,
          startTime: this.startTime,
          endTime: this.endTime
        }).then(resp => {
          if (resp.data.flag) {
            this.page = resp.data.data
            this.orderSendList = resp.data.data.records
          } else {
            alert(resp.data.message)
          }
        })
      },
      //取消订单
      okCancelOrder(){
        this.$http.post("/order/recycleOrder/siteCancelOrder.site",{
          orderId:this.cancelOrderId,
          cancelReason:this.siteCancelOrderReason
        }).then(resp=>{
          if(resp.data.flag){
            this.cancelOrderId=""
            this.siteCancelOrderReason=""
            this.cancelOrderReasonWindow=false
            this.getOrderSendList()
          }else{
            alert(resp.data.message)
          }
        })
      },
      //取消取消订单
      cancelCancelOrder(){
        this.cancelOrderReasonWindow=false
        this.siteCancelOrderReason=""
        this.cancelOrderId=""
      },
      //取消订单
      cancelSendOrder(orderId){
        this.cancelOrderId=orderId;
        this.cancelOrderReasonWindow=true
      },
      //确认派单
      okToSendOrder(recycleAccountId){
        this.$http.post("/order/recycleOrder/siteSendOrderToRecycler.site?recycleAccountId="+recycleAccountId+
        "&orderId="+this.sendOrderId).then(resp=>{
          alert(resp.data.message)
          if(resp.data.flag){
            this.getOrderSendList()
            this.sendOrderWindow=false
          }
        })
      },
      sendOrder(orderId){
        this.sendOrderId=orderId;
        this.$http.post("/site/recycleInfo/siteListSelect.site",{
          state:this.recycleState
        }).then(resp=>{
          if(resp.data.flag){
            this.recycleList=resp.data.data
          }else{
            alert(resp.data.message)
          }
        })
        this.sendOrderWindow=true
      },
      getOrderSendList() {
        this.$http.post("/order/recycleOrder/getSiteOrder.site", {
          orderState: 1,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          startTime: this.startTime,
          endTime: this.endTime
        }).then(resp => {
          if (resp.data.flag) {
            this.page = resp.data.data
            this.orderSendList = resp.data.data.records
          } else {
            alert(resp.data.message)
          }
        })
      }
    },
    created() {
      this.getOrderSendList()
    }
  }
</script>

<style>
</style>
